<template>
  <div>
    <el-drawer v-model="drawer" direction="rtl" size="40%">
      <div class="drawer-tab">
        <div class="flex" @click="tabIndex = 0" :class="{ active: tabIndex === 0 }">标题设置</div>
        <div class="flex" @click="tabIndex = 1" :class="{ active: tabIndex === 1 }">皮肤设置</div>
      </div>
      <div class="drawer-tab-content" v-show="tabIndex === 0">
        <div class="drawe-form">
          <div class="drawe-form-module">
            <div class="drawe-form-title">简历标题</div>
            <input type="text" maxlength="49" placeholder="个人简历" class="input" />
          </div>
          <div class="drawe-form-module">
            <div class="drawe-form-title">简历Slogan</div>
            <textarea  maxlength="99" rows="3" placeholder="我命由我，不由天！"></textarea>
          </div>
        </div>
      </div>
      <div class="drawer-tab-content" v-show="tabIndex === 1">
        <div class="skins-content">
          <div class="module recommond-module">
            <div class="module-title">推荐皮肤</div>
            <div class="skin_list">
              <span v-for="(item, index) in skinColors" :key="index" :style="{ backgroundColor: item }"
                :class="{ active: curChangeColr === item }"
                @click="curColor = item"></span>
            </div>
          </div>
          <div class="module custom-module">
            <div class="module-title">自定义颜色</div>
            <div class="make_skin">
              <el-color-picker popper-class="skinPicker" v-model="curColor" />
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <div class="m_clound">
      <div class="fixed_box">
        <div class="qm-info">
          <p>简历制作管家</p>
          <el-button type="primary" class="qm-btn qm-p" size="large" @click="printAction"><el-icon :size="20"><Printer /></el-icon> 下载简历</el-button>
          <el-button type="default" class="qm-btn qm-d" size="large" @click="drawer = true">标题/皮肤设置</el-button>
          <el-button type="default" class="qm-btn qm-d" size="large" @click="drawer = true">切换模版</el-button>
          <el-button type="default" class="qm-btn qm-d" size="large" @click="saveAction">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { SKIN_COLORS } from '@/utils/config';
import { isHex, rgbToHex } from '@/utils';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(['save', 'change-color']);
const drawer = ref(false);
const tabIndex = ref(0);

const skinColors = computed(() => SKIN_COLORS);

const curColor = ref(props.data.color);
const curChangeColr = computed(() => {
  if (isHex(curColor.value)) {
    return curColor.value;
  }
  return rgbToHex(curColor.value);
});

watch(() => curColor.value, (value) => {
  if (value) {
    emit('change-color', value);
  }
});

watch(() => props.data.color, (value) => {
  if (value) {
    curColor.value = value;
  }
});

const printAction = () => {
  window.print();
};

const saveAction = () => {
  emit('save');
  ElMessage.success('保存成功');
};

</script>
<style scoped lang="scss">
.m_clound {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  color: #fff;
  text-align: center;
}
.fixed_box {
  position: fixed;
  width: 300px;
  top: 60px;
}
.qm-info {
  
  margin-left: 20px;
  text-align: center;
}
.qm-info > p {
  margin-top: 6px;
  font-size: 18px;
  opacity: .8;
  color: #ffffff;
  padding-bottom: 20px;
}
.qm-btn {
  display: block;
  margin-top: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  align-items: center;
  width: 140px;
  justify-content: center;
  font-size: 16px;
}
.qm-btn.qm-d {
  color: #1467cc !important
}
.drawer-tab {
  display: flex;
  border-bottom: 2px solid #ddd;
}
.drawer-tab .flex {
  position: relative;
  flex: 1;
  text-align: center;
  padding-bottom: 15px;
  cursor: pointer;
  transition: all .2s;
}
.drawer-tab .flex.active {
  color: #f60;
}
.drawer-tab .flex.active:after {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: 2px solid #f60;
  left: 0;
  bottom: -2px;
}
.drawe-form {
  margin: 0 30px;
}
.drawe-form .drawe-form-title{
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}
.drawe-form .drawe-form-module {
  margin-top: 25px;
}
.drawe-form .drawe-form-module .input {
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: #333;
  width: 100%;
  background: #f3f4f6;
  border: 1px solid #f3f4f6;
  outline: none;
}
.drawe-form .drawe-form-module textarea {
  outline: none;
  padding: 6px 10px;
  border-radius: 5px;
  resize: none;
  font-size: 13px;
  color: #333;
  width: 100%;
  background: #f3f4f6;
  border: 1px solid #f3f4f6;
}
.skins-content {
  margin: 0 30px;
  display: flex;
}
.skins-content .module {
  flex: 1;
  margin-top: 20px;
}
.module-title {
  font-size: 14px;
  color: #000;
  text-align: center;
}
.skin_list {
  width: 158px;
  overflow: hidden;
  padding: 5px 0;
  margin: auto;
}
.skin_list span {
  float: left;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  margin: 10px 5px 0;
  -webkit-transition: all .1s ease-out 0s;
  transition: all .1s ease-out 0s;
  box-sizing: border-box;
  cursor: pointer;
}
.skin_list span.active {
  border: 2px solid #000;
  cursor: default;
}
.make_skin {
  position: relative;
  width: 106px;
  height: 106px;
  margin: 10px auto 0;
  cursor: pointer;
  background: -webkit-gradient(linear, left top, right bottom, from(red), color-stop(#fb0), color-stop(#00ff26), color-stop(blue), color-stop(#fb00ff), to(#000));
  background: linear-gradient(to bottom right, red, #fb0, #00ff26, blue, #fb00ff, #000);
  border: 1px solid #fff;
}
.skinPicker {
  
}
</style>
<style>
.make_skin .el-color-picker, .make_skin .el-color-picker .el-color-picker__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>